<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit Place Or Experience</title>
    <!-- zui -->
    <link href="${ctx}/res/zui/dist/css/zui.min.css" rel="stylesheet">
    <link href="${ctx}/res/smart-wizard/dist/css/smart_wizard.css" rel="stylesheet">
    <link href="${ctx}/res/smart-wizard/dist/css/smart_wizard_theme_arrows.css" rel="stylesheet">
    <link href="${ctx}/res/uploader/zui.uploader.min.css" rel="stylesheet">
    <style type="text/css">
        nav.navbar{
            border-radius: 0px;
        }

        .sw-theme-arrows .step-content{
            padding: 15px;
        }

    </style>
</head>
<body>
<jsp:include page="common/header.jsp"></jsp:include>
<div class="container-fluid">

    <div class="row">
        <div class="col-xs-2">
            <jsp:include page="common/menu.jsp"></jsp:include>
        </div>

        <!-- Start content -->
        <div class="col-xs-10">
            <h3>Edit Place&Experience
            <div class="pull-right">
                <button type="button" class="btn btn-default" onclick="cancel();">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="finish();"><i class="icon icon-save"></i> Save</button>
            </div>
            </h3>
            <hr>

            <form class="form-horizontal" id="paeForm" role="form" data-toggle="validator">
                <input type="hidden" name="id" value="${pae.id}">
                <div id="smartwizard">
                    <ul>
                        <li><a href="#step-1">Basic Info<br /><small>Edit basic info</small></a></li>
                        <li><a href="#step-2">Picture Info<br /><small>Edit picture and cover</small></a></li>
                        <li><a href="#step-3">Detail Info<br /><small>Edit detail info</small></a></li>
                    </ul>

                    <div>

                        <div id="step-1">
                            <div id="step-form-0" role="form" data-toggle="validator">
                            <div class="form-group">
                                <label for="title" class="col-sm-2">Title</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="title" name="title" value="${pae.title}" required>
                                </div>
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <label for="type" class="col-sm-2">Type</label>
                                <div class="col-sm-2">
                                    <select class="form-control" name="type" id="type" required>
                                        <option value="1">Place</option>
                                        <option value="2">Experience</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address" class="col-sm-2">Address</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="address" name="address" value="${pae.address}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="state" class="col-sm-2">Sate</label>
                                <div class="col-sm-2">
                                    <select class="form-control" name="state" id="state">
                                        <option value=""></option>
                                        <c:forEach items="${states}" var="state">
                                            <option value="${state.code}">${state.stateName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2">Tag</label>
                                <div class="col-sm-8">
                                    <label class="checkbox-inline" style="margin-left: 0px;width: 150px;">
                                        <input type="checkbox" name="selectAll" onclick="selectAllTag(this);"> <span class="text-gray">Select All</span>
                                    </label>
                                    <br/>
                                    <c:forEach items="${tags}" var="tag">
                                    <label class="checkbox-inline" style="margin-left: 0px;width: 150px;">
                                        <input type="checkbox" name="tags" value="${tag.tagCode}"> ${tag.tagName}
                                    </label>
                                    </c:forEach>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="playDuration" class="col-sm-2">Play Time</label>
                                <div class="col-sm-1">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="playDuration" name="playDuration" value="${pae.playDuration}">
                                        <div class="input-group-addon">H</div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="cost" class="col-sm-2">Cost</label>
                                <div class="col-sm-1">
                                    <div class="input-group">
                                        <div class="input-group-addon">$</div>
                                        <input type="text" class="form-control" id="cost" name="cost" value="${pae.cost}">
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lon" class="col-sm-2">Longitude</label>
                                <div class="col-sm-2">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="lon" name="lon" value="${pae.lon}">
                                        <div class="input-group-addon">°</div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lat" class="col-sm-2">Latitude</label>
                                <div class="col-sm-2">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="lat" name="lat" value="${pae.lat}">
                                        <div class="input-group-addon">°</div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="phoneNo" class="col-sm-2">Phone No</label>
                                <div class="col-sm-2">
                                    <input type="text" class="form-control" id="phoneNo" name="phoneNo" value="${pae.phoneNo}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="website" class="col-sm-2">Website</label>
                                <div class="col-sm-2">
                                    <input type="url" class="form-control" id="website" name="website" value="${pae.website}">
                                </div>
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-2">Email</label>
                                <div class="col-sm-2">
                                    <input type="email" class="form-control" id="email" name="email" value="${pae.email}">
                                </div>
                                <div class="help-block with-errors"></div>
                            </div>
                            </div>
                        </div>
                        <div id="step-2" class="">
                            <ul class="text-info">
                                <li>The max size to be allowed: 2M </li>
                                <li>The format to be allowed: *.png,*.jpg, *.jpeg</li>
                                <li>The resolution ratio recommended：480px×800px</li>
                            </ul>
                            <div style="text-align: right;" id="picUploader">
                                <div class="uploader-message text-center">
                                    <div class="content"></div>
                                    <button type="button" class="close">×</button>
                                </div>
                                <div class="uploader-files file-list file-list-lg" data-drag-placeholder="Please drag the picture to here "></div>
                                <div style="text-align: left">
                                    <hr class="divider">
                                    <div class="uploader-status pull-right text-muted"></div>
                                    <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> Choose File</button>
                                    <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> Start Upload</button>
                                </div>
                            </div>
                            <hr>
                            <div id="step-form-1" role="form" data-toggle="validator">
                            <div class="cards" id="pic-cards">
                                <c:forEach items="${pae.picList}" var="pic">
                                <div class="col-sm-3" style="text-align: center;">
                                    <div style="margin-bottom: 5px;">
                                        <input type="radio" name="cover" value="${pic.id}" required> Cover
                                    </div>
                                    <img data-toggle="tooltip" title="Click open cropping dialog" src="${ctx}/res/pic/${pic.id}" class="img-thumbnail" style="cursor: pointer;" onclick="openCropping('${pic.id}');">
                                    <div style="margin-top: 5px;">
                                        <input type="hidden" name="picIds" value="${pic.id}">
                                        <button class="btn btn-danger btn-sm" type="button" id="${pic.id}" onclick="delPic(this.id)"><i class="icon icon-times"></i> Delete</button>
                                    </div>
                                </div>
                                </c:forEach>
                                <c:if test="${empty pae.picList}">
                                <div class="col-sm-12" style="text-align: center;" id="noPic">
                                    Please upload picture.
                                </div>
                                </c:if>
                            </div>
                            </div>
                        </div>
                        <div id="step-3" class="">
                            <div id="step-form-2" role="form" data-toggle="validator">
                            <div class="form-group">
                                <label for="description" class="col-sm-1">Description</label>
                                <div class="col-sm-2" style="width: 200px;">
                                    <textarea class="form-control" style="width: 500px;height: 200px;" id="description" name="description">${pae.description}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="time" class="col-sm-1"><i class="icon icon-time" style="font-size: 18px;"></i></label>
                                <div class="col-sm-2" style="width: 150px;">
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="time" name="hours" value="${pae.specialDetail.hours}">
                                        <div class="input-group-addon">hour total</div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="groupSize" class="col-sm-1"><i class="icon icon-group" style="font-size: 18px;"></i></label>
                                <div class="col-sm-2" style="width: 300px;">
                                    <div class="input-group">
                                        <div class="input-group-addon">Group size up to</div>
                                        <input class="form-control" id="groupSize" name="groupSize" value="${pae.specialDetail.groupSize eq null?'':pae.specialDetail.groupSize}">
                                        <div class="input-group-addon">traveller</div>

                                    </div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" onclick="if(this.checked){$('#groupSize').val('unlimited');}else{$('#groupSize').val('');}"> Unlimited
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="language" class="col-sm-1"><i class="icon icon-comments" style="font-size: 18px;"></i></label>
                                <div class="col-sm-2" style="width: 200px;">
                                    <div class="input-group">
                                        <div class="input-group-addon">Offered in</div>
                                        <input type="text" class="form-control" id="language" name="language" value="${pae.specialDetail.language}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="transport" class="col-sm-1"><i class="icon icon-plane" style="font-size: 18px;"></i></label>
                                <div class="col-sm-2" style="width: 200px;">
                                    <div class="input-group">
                                        <div class="input-group-addon">Transport By</div>
                                        <input type="text" class="form-control" id="transport" name="transport" value="${pae.specialDetail.transport}">
                                    </div>
                                </div>
                            </div>
                            </div>
                            <hr>
                            <div class="form-group">
                                <div class="col-sm-offset-1 col-sm-1">
                                    <button class="btn" type="button" onclick="addDetail()"><i class="icon icon-plus"></i></button>
                                </div>
                            </div>
                            <c:forEach items="${pae.detailList}" var="detail">
                            <c:if test="${empty detail.type or detail.type eq 0}">
                            <div class="form-group">
                                <div class="col-sm-offset-1 col-sm-4">
                                    <input type="text" class="form-control" name="otherDetail" value="${detail.content}">
                                </div>
                                <div class="col-sm-1">
                                    <button class="btn btn-danger" type="button" onclick="delDetail(this)"><i class="icon icon-minus"></i></button>
                                </div>
                            </div>
                            </c:if>
                            </c:forEach>

                        </div>


                    </div>
                </div>
            </form>
        </div>
        <!-- End content -->

    </div>
</div>

<div class="modal fade" id="croppingModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="img-cutter" id="imgCutter">
                <div class="canvas"><img src="image.jpg" alt=""></div>
                <div class="actions">
                    <h5>Drag and drop for crop the picture</h5>
                    <button type="button" class="btn btn-primary img-cutter-submit">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="pic-template">
    <div class="col-sm-3" style="text-align: center">
        <div style="margin-bottom: 5px;">
            <input type="radio" name="cover" data-value="picId" required> Cover
        </div>
        <img data-src="picSrc" class="img-thumbnail">
        <div style="margin-top: 5px;">
            <input type="hidden" name="picIds" data-value="picId">
            <button class="btn btn-danger btn-sm" data-id="picId" onclick="delPic(this.id)"><i class="icon icon-times"></i> Delete</button>
        </div>
    </div>
</script>
<script type="text/html" id="detail-template">
    <div class="form-group">
        <div class="col-sm-offset-1 col-sm-4">
            <input type="text" class="form-control" name="otherDetail">
        </div>
        <div class="col-sm-1">
            <button class="btn btn-danger" type="button" onclick="delDetail(this);"><i class="icon icon-minus"></i></button>
        </div>
    </div>
</script>
<script type="text/javascript" src="${ctx}/res/jquery/jquery.js"></script>
<script type="text/javascript" src="${ctx}/res/zui/dist/js/zui.min.js"></script>
<script type="text/javascript" src="${ctx}/res/1000hz-bootstrap-validator/validator.min.js"></script>
<script type="text/javascript" src="${ctx}/res/jquery-template/jquery.loadTemplate.min.js"></script>
<script type="text/javascript" src="${ctx}/res/smart-wizard/dist/js/jquery.smartWizard.min.js"></script>
<script type="text/javascript" src="${ctx}/res/uploader/zui.uploader.min.js"></script>
<script type="text/javascript" src="${ctx}/res/bootbox/bootbox.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#smartwizard').smartWizard({
            theme:'arrows',
            transitionEffect:'slide',
            toolbarSettings:{
                toolbarExtraButtons: [
//                    $('<button type="button"></button>').text('Finish')
//                        .addClass('btn btn-info btn-finish')
//                        .on('click', function(){
//                            finish();
//                        }),
//                    $('<button type="button"></button>').text('Cancel')
//                        .addClass('btn btn-danger')
//                        .on('click', function(){
//                            cancel();
//                        })
                ]
            },
            anchorSettings: {
                markDoneStep: true, // add done css
                markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
                removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
                enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
            }
        });

        $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
            var elmForm = $("#step-form-" + stepNumber);
            // stepDirection === 'forward' :- this condition allows to do the form validation
            // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
            if(stepDirection === 'forward' && elmForm){
                elmForm.validator('validate');
                var elmErr = elmForm.find('.has-error');
                if(elmErr && elmErr.length > 0){
                    // Form validation failed
                    return false;
                }
            }
            return true;
        });


        $('#type').val('${pae.type}');
        $('#state').val('${pae.state}');

        <c:set value="${ fn:split(pae.tags, ',') }" var="tags" />
        <c:forEach items="${tags}" var="tag">
        $(':checkbox[value="${tag}"]').attr('checked',true);
        </c:forEach>

        $(':radio[value="${pae.cover}"]').attr('checked',true);

        $('#picUploader').uploader({
            url: '${ctx}/admin/pae/pic',
            filters:{
                mime_types: [
                    {extensions: 'jpg,gif,png,jpeg'}
                ],
                max_file_size: '5mb'
            },
            previewImageSize:{width:300,height:300},
            responseHandler:function(result,file){
                var res= JSON.parse(result.response);
                if(!res.success) {
                    //$('#picUploader').data('zui.uploader').showMessage(res.errmsg);
                    new $.zui.Messager(res.errmsg).show();
                    return res.errmsg;
                }else{
                    addPic(res.result.id);
                }
            }
        });
    });

    function addPic(picId){
        $('#pic-cards').loadTemplate($('#pic-template'),{picId:picId,picSrc:'${ctx}/res/pic/'+picId},{ append: true});
    }

    function delPic(picId){
        bootbox.confirm({
            message: 'You will delete this picture. Are you sure?',
            size:'small',
            callback: function (result) {
                if(!result)
                    return;

                $.ajax({
                    url:'${ctx}/admin/pae/pic/'+picId,
                    type:'delete',
                    dataType:'json',
                    success:function(result){
                        if(result.success){
                            new $.zui.Messager('Success!').show();
                            $('#'+picId).parent().parent().remove();
                        }else{
                            new $.zui.Messager(result.errmsg).show();
                        }
                    },
                    error:function(){
                        new $.zui.Messager('Failed, Please retry.').show();
                    }
                });
            }

        });

    }

    function addDetail() {
        $('#step-3').loadTemplate($('#detail-template'),{},{ append: true});
    }

    function delDetail(delBtn){
        $(delBtn).parent().parent().remove();
    }

    function finish(){
        var paeForm=$('#paeForm');
        if(paeForm){
            paeForm.validator('validate');
            var elmErr = paeForm.find('.has-error');
            if(elmErr && elmErr.length > 0){
                new $.zui.Messager('Oops we still have error in the form.').show();
                return;
            }

            //alert('Great! we are ready to submit form');
            var dialog = bootbox.dialog({
                message: '<div class="text-center"><i class="icon icon-spin icon-spinner"></i> Please wait...</div>',
                closeButton: false,
                size: 'small'
            });

            $.ajax({
                url:'${ctx}/admin/pae',
                data:$('#paeForm').serialize(),
                dataType:'json',
                method:'post',
                success:function(data){
                    dialog.modal('hide');
                    if(data.success){
                        new $.zui.Messager('Success!').show();
                        setTimeout(function(){
                            location.href='${ctx}/admin/pae/list';
                        },500);
                    }else{
                        new $.zui.Messager(data.errmsg).show();
                    }
                },
                error:function(){
                    dialog.modal('hide');
                    new $.zui.Messager('Server error, Please retry.').show();
                }
            });

        }
    }

    function cancel(){
        location.href='${ctx}/admin/pae/list';
    }

    function selectAllTag(all) {
        $('input[name="tags"]').prop('checked',all.checked);
    }

    function openCropping(picId) {
        $('#croppingModal').modal('show');
    }
</script>
</body>
</html>